<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="page-top-bg">
			<image :src="merchant.user_avatar" mode="widthFix" style="width: 100%;height:100%;filter: blur(5px);transform: scale(1.05);object-fit: cover;"></image>
		</view>
		<view class="author-info flex-start m-md p-md section-bg radius-5 rel">
			<view class="flex-center user-avatar" v-if="merchant.user_avatar">
				<u-avatar :src="merchant.user_avatar" size="50" v-if="merchant.user_avatar"></u-avatar>
			</view>
			<view class="m-l-sm flex flex-column">
				<view class="flex-start">
					<text class="text-md">{{ merchant.username }}</text>
					<view class="flex-center" v-if="param.channel == 2">
						<user-auth-icon class="m-l-xs" type="vip" size="35rpx" v-if="merchant.user_level > 0"></user-auth-icon>
						<user-auth-icon class="m-l-xs" type="merchant" size="35rpx"></user-auth-icon>
					</view>
					<user-auth-icon class="m-l-xs" type="admin" size="35rpx" v-if="param.channel == 1"></user-auth-icon>
				</view>
				<text class="text-xs text-secondary m-t-xs">{{ $util.handleStr($t('merchant.join-time-text'),merchant.join_day) }}</text>
			</view>
		</view>
		<view class="data-list section-bg conter">
			<u-grid :border="false" v-if="merchant.data">
				<u-grid-item>
					<text class="grid-value number">{{merchant.data.ing }}</text>
					<view class="grid-desc">
						<text>{{ $t('merchant-info.card-label-1') }}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{merchant.data.today}}</text>
					<view class="grid-desc">
						<text>{{ $t('merchant-info.card-label-2') }}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number">{{merchant.data.total}}</text>
					<view class="grid-desc">
						<text>{{ $t('merchant-info.card-label-3') }}</text>
					</view>
				</u-grid-item>
			</u-grid>
			<view class="text-xs text-auxiliary p-b-sm" style="text-align: center;">
				<text>
					{{ $t('merchant.card-1-tips-text') }}
				</text>
			</view>
		</view>
		<u-divider :text="$t('merchant-info.title')"></u-divider>
		<view>
			<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
			<m-tasks :list="list.data" v-if="!listLoad"></m-tasks>
			<uni-load-more :status="status" v-if="showLoading" :content-text="contentText"></uni-load-more>
		</view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import AD from "../../utils/ad.js"
	export default {
		data() {
			return {
				merchant:[], // 商家信息
				listLoad:true,
				status:"loading",
				showLoading:false,
				param: {
					channel:'',
					channel_id:'',
					page: 1,
					state: 3,
					// limit_surplus_num:1,
					// limit_end_time:1,
					sort:'id',
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			contentText: state => state.content.contentText,
		}),
		async onLoad(option) {
			let {
				channel,
				channel_id
			} = option
			this.param.channel = channel
			this.param.channel_id = channel_id
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		// 页面显示
		async onShow(){
			await this.getMerchantInfo()
		},
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async getMerchantInfo(){
				let {
					param
				} = this
				let res = await this.$api.merchant.getMerchantInfo({'channel':param.channel,'channel_id':param.channel_id})
				if(res.code == 200){
					this.merchant = res.data
					await this.getList()
				}
			},
			async getList(page = 0){
				let {
					param,
					list : oldList
				} = this
				if (page) {
					this.param.page = page
				}
				let res = await this.$api.task.getTaskList(param)
				let newList = res.data
				let list = {}
				if (param.page == 1) {
					list = newList;
				} else {
					newList.data = oldList.data.concat(newList.data) // 合并数组
					list = newList;
				}
				this.list = list
				this.listLoad =  false
			}
		},

	}
		
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.page-top-bg{
		background-color: var(--main-color-1);
		height: 160rpx;
		overflow: hidden;
		width: 100%;
		// #ifdef APP-PLUS
			height: 230rpx!important;
		// #endif
	}
	// var(--status-bar-height)
	.author-info{
		margin-top: -100rpx;
		// #ifdef APP-PLUS
		margin-top: -200rpx!important;
		// #endif
		// background-color: rgba(255, 255, 255, .8);
	}
	.top{
		margin-top: -60rpx;
	}
</style>